<template>
  <div class="workflow-monitoring">
    <div v-if="!loading" class="workflow-monitoring-context">
      <div class="data-box">
        <div
          v-for="item in flowData"
          :key="item.type"
          class="data-box-item"
          @click="doHandler(item)"
        >
          <div class="data-box-item-icon">
            <div :class="`item-icon-${item.type}  item-icon`">
              <i :class="item.icon"></i>
            </div>
          </div>
          <div class="data-box-item-context">
            <p class="data-box-item-context-text">{{ item.name }}</p>
            <p class="data-box-item-context-num">{{ item.num }}</p>
          </div>
        </div>
      </div>
      <div class="data-chart first">
        <EchartView key="allFlow" class="data-chart-item" :echart-data="echartDatas.allFlow" />
        <EchartView key="yearFlow" class="data-chart-item" :echart-data="echartDatas.yearFlow" />
      </div>
      <div class="data-chart next">
        <EchartView key="monthFlow" class="data-chart-item" :echart-data="echartDatas.monthFlow" />
        <EchartView key="weekFlow" class="data-chart-item" :echart-data="echartDatas.weekFlow" />
      </div>
      <div class="data-chart-bit">
        <EchartBitView :echart-data="echartDatas.bitFlow" />
      </div>
    </div>
    <div v-if="loading" v-loading="loading" style="height: 100%"></div>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref } from 'vue';
  import { showFunc } from '@jecloud/func';
  import EchartView from './echart-view.vue';
  import EchartBitView from './echart-bit-view.vue';
  import { getStatistics } from '@/api/monitoring';
  import { isNotEmpty } from '@jecloud/utils';

  export default defineComponent({
    name: 'WorkflowMonitoring',
    components: { EchartView, EchartBitView },
    setup() {
      const loading = ref(true);
      const flowData = ref();
      const echartDatas = reactive({
        allFlow: {
          title: '所有流程',
          num: '',
          data: [],
        },
        yearFlow: {
          title: '近一年流程',
          num: '',
          data: [],
        },
        monthFlow: {
          title: '近一月流程',
          num: '',
          data: [],
        },
        weekFlow: {
          title: '近一周流程',
          num: '',
          data: [],
        },
        bitFlow: {
          xAxisData: [],
          data: [],
        },
      });
      const doHandler = (row) => {
        if (row.funcCode) {
          showFunc(row.funcCode);
        }
      };
      // 初始化展板数据
      const initData = () => {
        loading.value = true;
        getStatistics().then((data) => {
          doBoardData(data);
        });
      };
      // 封装展板数据
      const doBoardData = (data) => {
        if (isNotEmpty(data)) {
          // 顶部流程个数数据
          if (isNotEmpty(data.run)) {
            const runData = [
              {
                type: 'whole',
                name: '所有流程',
                num: data.run.all,
                funcCode: 'JE_WORKFLOW_MONITOR_ALL',
                icon: 'fal fa-project-diagram',
              },
              {
                type: 'run',
                name: '运行时流程',
                num: data.run.wait,
                funcCode: 'JE_WORKFLOW_MONITOR_RUNTIME',
                icon: 'fal fa-circle-caret-right',
              },
              {
                type: 'error',
                name: '异常流程',
                num: data.run.abnormal,
                funcCode: 'JE_WORKFLOW_EXCEPTIONAL_ALL',
                icon: 'fal fa-circle-exclamation',
              },
              {
                type: 'notvalid',
                name: '处理人无效流程',
                num: data.run.invalidHandler,
                funcCode: 'JE_WORKFLOW_EXCEPTIONAL',
                icon: 'fal fa-circle-x',
              },
            ];
            flowData.value = runData;
          }
          // echart 饼图数据
          if (isNotEmpty(data.time)) {
            // 所有流程
            echartDatas.allFlow.num = data.time.all.all;
            echartDatas.allFlow.data = [
              { value: data.time.all.all - data.time.all.wait, name: '已结束' },
              { value: data.time.all.wait, name: '未结束' },
            ];
            // 近一年流程
            echartDatas.yearFlow.num = data.time.year.all;
            echartDatas.yearFlow.data = [
              { value: data.time.year.all - data.time.year.wait, name: '已结束' },
              { value: data.time.year.wait, name: '未结束' },
            ];
            // 近一月流程
            echartDatas.monthFlow.num = data.time.month.all;
            echartDatas.monthFlow.data = [
              { value: data.time.month.all - data.time.month.wait, name: '已结束' },
              { value: data.time.month.wait, name: '未结束' },
            ];
            // 近一周流程
            echartDatas.weekFlow.num = data.time.week.all;
            echartDatas.weekFlow.data = [
              { value: data.time.week.all - data.time.week.wait, name: '已结束' },
              { value: data.time.week.wait, name: '未结束' },
            ];
          }
          // echart 柱状图数据
          if (isNotEmpty(data.type)) {
            const values = [];
            const keys = [];
            Object.keys(data.type).forEach((item) => {
              keys.push(item);
              values.push(data.type[item]);
            });
            echartDatas.bitFlow.xAxisData = keys;
            echartDatas.bitFlow.data = values;
          }
        }
        loading.value = false;
      };

      initData();
      return { echartDatas, flowData, doHandler, loading };
    },
  });
</script>
<style lang="less" scoped>
  .workflow-monitoring {
    width: 100%;
    height: 100%;
    overflow: auto !important;
    background-color: #f0f2f5;
    padding: 20px 0;
    &-context {
      width: 1250px;
      margin: 0 auto;
      .data-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        &-item {
          width: 24%;
          height: 120px;
          border-radius: 4px;
          background: white;
          display: flex;
          padding: 0 20px;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;
          cursor: pointer;
          &-icon {
            width: 72px;
            line-height: 120px;
            .item-icon {
              height: 70px;
              line-height: 70px;
              text-align: center;
              font-size: 30px;
              color: white;
              &-whole {
                width: 100%;
                background-color: #5570c6;
                border-radius: 4px;
              }
              &-run {
                width: 100%;
                background-color: #90cc75;
                border-radius: 4px;
              }
              &-error {
                width: 100%;
                background-color: #fac859;
                border-radius: 4px;
              }
              &-notvalid {
                width: 100%;
                background-color: #ee6667;
                border-radius: 4px;
              }
            }
          }
          &-context {
            flex: 1;
            margin-left: 30px;
            margin-top: 30px;
            &-text {
              font-size: 16px;
              margin-bottom: 5px;
              color: #726d6d;
            }
            &-num {
              font-size: 25px;
              font-weight: bold;
            }
          }
        }
      }
      .data-chart {
        display: flex;
        justify-content: space-between;
        &-item {
          margin: 10px 0;
          width: 49.3%;
          height: 300px;
          background: white;
          border-radius: 4px;
        }
      }
      .data-chart-bit {
        border-radius: 4px;
        height: 400px;
        margin-top: 10px;
        background: white;
      }
    }
  }
</style>
